<template>
	<view>
		<view v-if="showRegister" class="reg-container">
			<view class="reg-top">
				<view class="welcome-title">
					欢迎加入享游全城顺风车
				</view>
				<view class="line"></view>
				<view class="slogan">
					slogansloganslogansl
				</view>
			</view>
			<image src="@/static/img/driver-reg.png" style="width: 100%;"></image>
			<view class="flex-box">
				<view class="flex-item">
					<image src="@/static/img/share.png" style="width: 30rpx; height: 30rpx;"></image>
					<view class="item-txt">分享出行</view>
				</view>
				<view class="flex-item">
					<image src="@/static/img/money.png" style="width: 30rpx; height: 30rpx;"></image>
					<view class="item-txt">分摊成本</view>
				</view>
				<view class="flex-item">
					<image src="@/static/img/bao.png" style="width: 30rpx; height: 30rpx;"></image>
					<view class="item-txt">平台保障</view>
				</view>
			</view>
			<view style="padding: 34rpx; margin-top: 100rpx;">
				<view class="reg-btn" @click="toRegister">立即注册</view>
			</view>
		</view>
		
		<view v-if="showMask" class="mask"></view>
		<view v-if="showConfirmProtocol" class="confirm-protocol-box">
			<view class="top">
				<view class="title">{{protocol.title}}</view>
				<image src="@/static/img/close_x.png" style="width: 56rpx; height: 56rpx;" @click="clickProtocolClose"></image>
			</view>
			<view class="cnt">{{protocol.content}}</view>
			<view class="form-box">
				<checkbox-group style="margin-top: 40rpx;">
					<label style="color: #6FC65E;">
						<checkbox color="#6FC65E" borderColor="#6FC65E" value="OK" checked="false"/>点击同意即代表您已阅读并同意相关内容
					</label>
				</checkbox-group>
				<view class="btn" @click="clickProtocolOk">
					确定
				</view>
			</view>
		</view>
		
		<!-- 车主主界面 -->
		<view v-if="driverInfo" class="driver-cnt">
			<view class="driver-center">
				<view class="info">
					<image src="@/static/img/driver-avatar.png" style="width: 60rpx; height: 60rpx;"></image>
					<view>车主中心</view>
				</view>
				<image src="@/static/img/icon-arrow-right.png" style="width: 31rpx; height: 24rpx"></image>
			</view>
			<view class="form-box">
				<image src="@/static/img/driver-index-bg.png" class="form-box-bg"></image>
				<view class="cnt">
					<view class="btn-box">
						<view class="btn-item" :class="btnActived===1?'btn-actived':''" @click="changeBtn(1)">市内</view>
						<view class="btn-item" :class="btnActived===2?'btn-actived':''" @click="changeBtn(2)">跨城</view>
					</view>
					<view class="start-item" @click="toSearch(1)">
						<view class="start-item-icon"></view>
						<input class="uni-input start-item-cnt" placeholder="从哪儿出发" disabled="disable" v-model="startPosition.showAddress" />
					</view>
					<view class="line"></view>
					<view class="end-item" @click="toSearch(2)">
						<view class="end-item-icon"></view>
						<input class="uni-input end-item-cnt" placeholder="你要去哪儿"  disabled="disable" v-model="endPosition.showAddress"/>
					</view>
				</view>
			</view>
			<view class="trip-title-box">
				<image src="@/static/img/driver-trip.png" style="width: 56rpx; height: 56rpx;"></image>
				<view class="title">发布的行程</view>
			</view>
			<view class="trip-list-box">
				<view class="item" v-for="(item, index) in driverTripList" @click="goDetail(item)">
					<view class="cnt">
						<view class="r1">
							<view class="status">{{item.statusStr}}</view>
							<view class="time">{{item.timeStr}}</view>
						</view>
						<view class="r2">
							<view class="txt">{{item.startShowAddress}}</view>
							<image class="img" src="@/static/img/single-arrow-right.png"></image>
							<view class="txt">{{item.endShowAddress}}</view>
						</view>
					</view>
					<image src="@/static/img/icon-arrow-right.png" style="width: 24rpx; height: 24rpx;"></image>
				</view>
			</view>
		</view>
		
		<!-- 底部导航距离，做兼容处理的-->
		<view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		<!-- 底部菜单 -->
		<sfcTabBar></sfcTabBar>
	</view>
</template>

<script>
	import sfcTabBar from '@/components/pageFooter/sfc.vue';
	import {
		mapGetters
	} from "vuex";
	import {
		getDriverRegInfo,
		queryDriverTripList} from '@/api/api.js';
	
	export default {
		computed: mapGetters(['isLogin', 'uid', 'globalData', 'bottomNavigationIsCustom']),
		components:{
			sfcTabBar
		},
		data() {
			return {
				driverInfo:null,
				showRegister: false,
				showMask: false,
				showConfirmProtocol: false,
				protocol:{
					title:'协议及基本规则同意',
					content:'在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您在使用xx顺风车车主产品或者服务前，请您'
				},
				btnActived: 1,
				location: {
					longitude: null,
					latitude: null
				},
				startPosition:{
					showAddress:'从当前位置出发',
					longitude: null,
					latitude: null
				},
				endPosition:{
					showAddress:'',
					longitude: null,
					latitude: null
				},
				jumpTimer:null,
				driverTripList:[]
			}
		},
		onShow() {
			this.initShow();
		},
		onLoad() {
			// 当前定位
			this.currentLocation();
			uni.$on('positionSelected4Driver', this.updatePosition);
		},
		methods: {
			// 定位
			currentLocation() {
				if(!this.driverInfo){
					return;
				}
				let that = this;
				uni.getLocation({
					// 默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						console.log('gcj02=',res)
						that.location.longitude = res.longitude;
						that.location.latitude = res.latitude;
						// 经纬度转地址
						that.geocoder(res.latitude, res.longitude);
					},
					fail: function(res) {
						console.log('定位失败')
					}
				})
			},
			// 经纬度转地址
			geocoder(latitude, longitude){
				geocoder(latitude,longitude).then(res=>{
					if(200 === res.code){
						this.startPosition = {
							latitude: latitude,
							longitude: longitude,
							showAddress: res.data.roughAddress ? res.data.roughAddress:res.data.recommendAddress,
							fullAddress: res.data.address,
							province: res.data.province,
							city: res.data.city,
							district: res.data.district,
							street: res.data.street,
							startDetail: res.data.street_number
						}
					}
				}).catch(res=>{
					console.log('经纬度转地址异常：',res)
				})
			},
			// 到地址搜索页面
			toSearch(n){
				clearTimeout(this.jumpTimer);
				let url = '/pages/xyqc/sfc/client/search?d=1&n=' + n;
				if(this.startPosition && this.startPosition.latitude && this.startPosition.longitude){
					url = url + '&lat=' + this.startPosition.latitude + '&lng=' + this.startPosition.longitude;
				}
				this.jumpTimer = setTimeout(()=>{
					uni.navigateTo({
						url:url
					})
				},200)
			},
			// 监听搜索页选择的地址
			updatePosition(e){
				console.log('driver接收搜索页数据：',e)
				if(1===e.n){
					this.startPosition = e.item;
				}
				else {
					this.endPosition = e.item;
				}
				// 如果起点和终点都选好了、就立即进入发布行程页面
				if(this.startPosition.showAddress && this.endPosition.showAddress){
					// 缓存行程数据、行程页面去出来用
					let param = {
						cityInner: this.cityInner,
						startPosition: this.startPosition,
						endPosition: this.endPosition
					}
					uni.setStorageSync('driverTripData', param);
					clearTimeout(this.jumpTimer);
					this.jumpTimer = setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/xyqc/sfc/driver/publish-trip'
						})
					},300)
				}
			},
			toRegister(){
				this.showMask = true;
				this.showConfirmProtocol = true;
			},
			clickProtocolClose(){
				this.showMask = false;
				this.showConfirmProtocol = false;
			},
			clickProtocolOk(){
				this.showMask = false;
				this.showConfirmProtocol = false;
				uni.navigateTo({
					url:'/pages/xyqc/sfc/driver/register/index'
				})
			},
			initShow(){
				let that = this;
				getDriverRegInfo().then(res => {
					let d = res.data;
					if(d){
						if(d.status===0 || d.status===1 || d.status===3){
							// 待提交、待审核、审核被拒
							uni.redirectTo({
								url: '/pages/xyqc/sfc/driver/register/index'
							})
						}
						else {
							// 审核通过
							this.driverInfo = d;
						}
					}
					else {
						// 未提交过资料
						this.showRegister = true;
					}
				});
				that.getDriverTripList();
			},
			// 切换市内、跨城
			changeBtn(n){
				this.btnActived = n;
				this.cityInner = 1===n;
			},
			goDetail(item){
				uni.navigateTo({
					url:'/pages/xyqc/sfc/driver/trip-detail?id='+item.id
				})
			},
			getDriverTripList(){
				queryDriverTripList().then(res=>{
					this.driverTripList = res.data;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.reg-container{
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		.reg-top{
			padding: 70rpx;
			.welcome-title{
				height: 58rpx;
				font-size: 42rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #333333;
				line-height: 58rpx;
			}
			.line{
				width: 50%;
				height: 6rpx;
				background: #6FC65E;
			}
			.slogan{
				height: 47rpx;
				font-size: 33rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
				line-height: 47rpx;
			}
		}
		.flex-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			.flex-item{
				display: flex;
				justify-content: center;
				align-items: center;
				.item-txt{
					padding-left: 10rpx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 41rpx;
				}
			}
		}
		.reg-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			height: 94rpx;
			background: #6FC65E;
			border-radius: 47rpx;
			font-size: 38rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.mask{
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9;
	}
	.confirm-protocol-box{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 60%;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 21rpx 21rpx 0rpx 0rpx;
		z-index: 99;
		.top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 52rpx;
			.title{
				height: 52rpx;
				font-size: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 52rpx;
			}
		}
		.cnt{
			padding: 30rpx 0;
			height: calc(100% - 440rpx);
			overflow: hidden;
			overflow-y: scroll;
		}
		.form-box{
			height: 200rpx;
			.btn{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 94rpx;
				margin-top: 40rpx;
				background: #6FC65E;
				border-radius: 47rpx;
				font-size: 38rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
	.driver-cnt{
		background-color: #FFFFFF;
		.driver-center{
			width: 100%;
			height: 90rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			.info{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				gap: 14rpx;
			}
		}
		.form-box{
			width: 100%;
			height: 415rpx;
			position: relative;
			.form-box-bg{
				width: 100%;
				height: 415rpx;
			}
			.cnt{
				position: absolute;
				top: 140rpx;
				left: 30rpx;
				right: 30rpx;
				background: #FFFFFF;
				box-shadow: 0rpx -2rpx 31rpx 0rpx #D2D2D2;
				border-radius: 21rpx;
				z-index: 99;
				
				height: 388rpx;
				display: flex;
				flex-direction: column;
				padding: 30rpx;
				
				.btn-box{
					height: 91rpx;
					display: flex;
					justify-content: space-evenly;
					align-items: center;
				}
				.btn-item{
					height: 47rpx;
					font-size: 33rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;
				}
				.btn-actived{
					border-radius: 3rpx;
					border-bottom: 6rpx solid #6FC65E;
				}
				.start-item{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.start-item-icon{
					width: 17rpx;
					height: 17rpx;
					background: #6FC65E;
					border-radius: 16rpx;
				}
				.start-item-cnt{
					padding-left: 28rpx;
					flex: 1;
					height: 41rpx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 41rpx;
					
				}
				.line{
					margin-left: 45rpx;
					height: 1rpx;
					border-bottom: 1rpx solid #DFDFDF;
				}
				.end-item{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
				}
				.end-item-icon{
					width: 17rpx;
					height: 17rpx;
					background: #EC7F2F;
					border-radius: 16rpx;
				}
				.end-item-cnt{
					padding-left: 28rpx;
					flex: 1;
					height: 41rpx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 41rpx;
				}
				
			}
		}
	}
	.trip-title-box{
		margin-top: 140rpx;
		display: flex;
		align-items: center;
		gap: 14rpx;
		padding: 40rpx 30rpx;
		.title{
			font-size: 33rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #333333;
		}
	}
	.trip-list-box{
		padding: 0 30rpx;
		.item {
			margin: 10rpx 0;
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 20rpx;
			background: linear-gradient(90deg, #FFFFFF 0%, #DBF1D7 50%, #FFFFFF 100%);
			border-radius: 21rpx;
			border: 1rpx solid #E2E5E9;
			.cnt{
				flex: 1;
				overflow: hidden;
				.r1{
					display: flex;
					align-items: center;
					gap: 20rpx;
					.status{
						height: 51rpx;
						width: 174rpx;
						background: #6FC65E;
						border-radius: 26rpx;
						line-height: 51rpx;
						text-align: center;
						font-size: 25rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}
					.time{
						font-size: 38rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						color: #333333;
					}
				}
				.r2{
					width: 100%;
					margin-top: 26rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					gap: 10rpx;
					font-size: 29rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #666666;
					.txt{
						// width: calc(50% - 18rpx);
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			.img{
				width: 34rpx;
				height: 14rpx;
			}
		}
	}
</style>
